<template>
  <div>
    <el-table :data="tableData" stripe height="100%" @current-change="setCurrent">
      <el-table-column
        v-for="column in tableColumns"
        :key="column.code"
        :prop="column.code"
        :label="column.name"
        :width="column.width ? column.width : 100"
        :formatter="
          (row, column, cellValue, index) => {
            return cell_formatter(column, cellValue, cut_demand_define)
          }
        "
      />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" v-if="scope.row.optimize === 0" @click="loadCurrent(scope.row)">
            选料
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="show_cal_panel" title="选材">
      <el-divider></el-divider>
      <el-table :data="current_boards" style="width: 100%">
        <el-table-column property="width" width="100" label="宽度" />
        <el-table-column property="length" width="100" label="总长" />
        <el-table-column property="qty" width="100" label="存量" />
        <el-table-column
          width="100"
          :formatter="
            (row, column, cellValue, index) => {
              const r = cal_usage(row)
              if (r.cuts_each_board === 0) return '×'
              else if (r.board_qty) return r.board_qty.toString()
              else return '×'
            }
          "
          label="用量"
        />
        <el-table-column
          width="100"
          :formatter="
            (row, column, cellValue, index) => {
              const r = cal_usage(row)
              if (r.cuts_each_board === 0) return '×'
              else if (r.all_remainder) return (r.all_remainder / 1000000).toFixed(4)
              else return '×'
            }
          "
          label="余料"
        />
        <el-table-column
          width="100"
          :formatter="
            (row, column, cellValue, index) => {
              const r = cal_usage(row)
              if (r.cuts_each_board === 0) return '×'
              else if (r.over_output) return r.over_output.toString()
              else return '×'
            }
          "
          label="超额产出"
        />
        <el-table-column label="操作">
          <template #default>
            <el-button size="small"> 转请购 </el-button>
            <el-button size="small"> 转领料 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <el-button type="primary" @click="confirm_spec">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { cut_demand_define } from '@/meta/index'
import type { cut_demand } from '@/types/billdata'
import { fill_ref_info, cell_formatter } from '@/utils/common'
import { onMounted, ref } from 'vue'
import { groupBoard } from '@/utils/groupUtils'
import type { t_boards_spec_options } from '@/types/producedata'
import { board_usage_cal } from '@/utils/cutUsageCal'
import { useDbStore } from '@/stores/modules/database'
const dbStore = useDbStore()
const show_cal_panel = ref<boolean>(false)
const tableColumns = cut_demand_define
const current_demand = ref<cut_demand>()
const tableData = ref<cut_demand[]>()
const current_boards = ref<t_boards_spec_options[]>([])
const loadCurrent = (d: cut_demand) => {
  show_cal_panel.value = true
  current_boards.value = groupBoard(dbStore.board).filter(
    (r) =>
      r.metal === (typeof d.metal === 'string' ? d.metal : d.metal.code) && d.height === r.height
  )
}
const setCurrent = (r: cut_demand) => {
  current_demand.value = r
}
const cal_usage = (r: t_boards_spec_options) => {
  const result = board_usage_cal(current_demand.value!, [r])[0]
  return result
}

const confirm_spec = () => {}
onMounted(() => {
  const tmp = dbStore.cutdemandbill
  fill_ref_info(tmp, cut_demand_define)
    .then(() => {
      tableData.value = tmp
    })
    .catch(() => {
      console.log('err')
    })
})
</script>
